<script setup lang="ts">
import { ref } from "vue";
import useUserStore from "../../store/userStore.ts";
import UserMessage from "../user/UserMessage.vue";
import { getLatestVideoAPI } from "../../api/section";
import { Video } from "../..";

const getImageUrl = (path: string) => {
  return new URL(`${path}`, import.meta.url).href;
};

const userStore = useUserStore();

const latestVideo = ref<Video>();

// const nevImg = ref<string>("../../assets/logo.jpg");

const isMobile = ref(
  navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
);

getLatestVideoAPI()
  .then((response) => {
    if (response.status !== 200) {
      throw new Error("网络错误");
    }
    return response.data;
  })
  .then((result) => {
    latestVideo.value = result.data;
  });

const routes = {
  home: {
    name: "home",
  },
  video: {
    name: "video",
  },
  homework: {
    name: "homework",
  },
  login: {
    name: "login",
  },
  discussion: {
    name: "discussion",
  },
  exam_prepare: {
    name: "exam_prepare",
  },
  exam_history: {
    name: "exam_history",
  },
  manage: {
    name: "manage",
  },
};

const isShow = ref(false);

const logout = () => {
  userStore.logout();
};
</script>

<template>
  <div class="mb-5">
    <el-affix
      class="nav text-white bg-primary"
      style="background-color: #84638e"
    >
      <div
        style="
          display: block;
          box-sizing: border-box;
          vertical-align: top;
          background-color: #ffffff;
        "
      >
        <el-image
          style="height: 60px; text-align: center"
          :src="getImageUrl('../../assets/image/logo.jpg')"
        ></el-image>
      </div>

      <div v-if="isMobile">
        <div class="flex">
          <div class="p-2">网络工程实验</div>
          <div class="flex-grow"></div>
          <div>
            <button
              type="button"
              class="text-gray-500 hover:text-white focus:text-white"
              @click="() => (isShow = !isShow)"
            >
              <svg
                class="fill-current text-white h-8 w-8"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
              >
                <path
                  d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"
                />
              </svg>
            </button>
          </div>
        </div>
        <div class="p-1" v-show="isShow">
          <div>
            <router-link :to="routes.home">首页</router-link>
          </div>
          <div>
            <router-link :to="`video/${latestVideo?.id}`">查看视频</router-link>
          </div>
          <div>
            <el-dropdown>
              <span>
                线上测试
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <router-link :to="routes.exam_prepare"
                      >开始考试
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link :to="routes.exam_history"
                      >考试历史
                    </router-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div>
            <router-link :to="routes.homework">查看作业</router-link>
          </div>
          <div>
            <router-link :to="routes.discussion">在线讨论</router-link>
          </div>
          <div>
            <router-link :to="routes.home" v-if="userStore.isAdmin"
              >管理页面
            </router-link>
          </div>
          <div>
            <router-link :to="routes.home" v-if="!userStore.isLogin"
              >登录
            </router-link>
            <router-link :to="routes.home" v-else>
              <UserMessage />
            </router-link>
          </div>
        </div>
      </div>
      <el-menu
        v-else
        mode="horizontal"
        :ellipsis="false"
        router
        background-color="#84638e"
        text-color="#fff"
        active-text-color="#f5d2a5"
      >
        <el-menu-item index="logo" :route="routes.home">
          网络工程实验
        </el-menu-item>
        <el-menu-item index="video" :route="`video/${latestVideo?.id}`"
          >课程视频
        </el-menu-item>
        <el-menu-item index="homework" :route="routes.homework"
          >课后习题
        </el-menu-item>
        <el-sub-menu index="exam">
          <template #title>线上测试</template>
          <el-menu-item index="exam-do" :route="routes.exam_prepare"
            >开始测试
          </el-menu-item>
          <el-menu-item index="exam-look" :route="routes.exam_history"
            >测试记录
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="discussion" :route="routes.discussion"
          >在线讨论
        </el-menu-item>
        <el-menu-item index="manage" v-if="userStore.isAdmin"
          >管理页面
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item
          index="login"
          :route="routes.login"
          v-if="!userStore.isLogin"
          >登录
        </el-menu-item>
        <el-sub-menu index="person" v-else>
          <template #title> {{ userStore.userName }}</template>
          <el-menu-item @click="logout">注销</el-menu-item>
        </el-sub-menu>
        <el-menu-item></el-menu-item>
      </el-menu>
    </el-affix>
  </div>
</template>

<style scoped></style>
